<template>
  <div class="xqjr-upload-wrapper">
    <template v-if="tempList.length > 0">
      <template v-if="$scopedSlots.list">
        <slot name="list" :list="tempList" />
      </template>
      <div v-else class="xqjr-upload-list">
        <div v-for="(file, index) in tempList" :key="index" class="xqjr-upload-list-item">
          <div class="xqjr-upload-list-item-img">
            <site-file :src="file.url" />
          </div>
          <div class="xqjr-upload-list-item-text">{{ file.name }}</div>
          <div class="xqjr-upload-list-item-mask" @click.stop>
            <a-icon type="eye" @click.stop="previewFile(file.url)" />
            <a-icon v-if="!disabled" type="delete" @click.stop="deleteFile(index)" />
          </div>
        </div>
      </div>
    </template>
    <template v-else-if="disabled">
      <template v-if="$slots.empty">
        <slot name="empty" />
      </template>
      <div v-else class="xqjr-upload-empty">无</div>
    </template>
    <a-upload-dragger
      v-if="(hideOnLimit ? tempList.length < limit : true) && !disabled && draggable"
      :before-upload="beforeUpload"
      :show-upload-list="false"
      :multiple="multiple"
      :disabled="disabled"
      :file-list="tempList"
      :accept="accept"
      class="xqjr-upload-action"
      @change="handleChange"
    >
      <slot name="action" />
      <div v-if="!$slots.action" class="xqjr-upload-action-inner">
        <a-icon type="upload" class="xqjr-upload-action-icon" />
        <div class="xqjr-upload-action-text">拖拽到此处或点击选择上传</div>
      </div>
    </a-upload-dragger>
    <a-upload
      v-if="(hideOnLimit ? tempList.length < limit : true) && !disabled && !draggable"
      :before-upload="beforeUpload"
      :show-upload-list="false"
      :multiple="multiple"
      :disabled="disabled"
      :file-list="tempList"
      :accept="accept"
      class="xqjr-upload-action"
      @change="handleChange"
    >
      <slot name="action" />
      <div v-if="!$slots.action" class="xqjr-upload-action-inner">
        <a-icon type="upload" class="xqjr-upload-action-icon" />
        <div class="xqjr-upload-action-text">点击此处选择上传</div>
      </div>
    </a-upload>
  </div>
</template>
<script>
import { uploadSiteFile } from "./api";
import UploadMixin from "./uploadMixin";

const mixin = new UploadMixin({
  uploadReq: uploadSiteFile
});

export default {
  name: "UploadSiteFile",
  mixins: [mixin],
  props: {
    accept: {
      type: String,
      default: ".doc,.docx,.xls,.xlsx,.pdf,.zip,.rar"
    }
  }
};
</script>
<style lang="scss">
@import "./style.scss";
</style>
